<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/jquery.banner.css">
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="./libs/layui/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="./libs/layui/layui.js"></script>
</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <div class="top"></div>
        <!-- 搜索 -->
        <div class="headSearchBox">
            <div class="main flex-c-between">
                <h1 class="logo">
                    <img src="./images/logo.png" alt="">
                </h1>
                <div class="logoRight flex-c-around">
                    <div class="headerSearch">
                        <em class="placeholder">面膜</em>
                        <input type="text" class="searchInput input-no">
                        <div class="searchBtn">搜索</div>
                        <ul class="searchList">
                        </ul>
                    </div>
                    <a href="./cart.html" class="headerCart">
                        <i></i>
                        <span>购物车</span>
                    </a>
                </div>
            </div>
        </div>
        <!-- 导航 -->
        <div class="headNavBox">
            <div class="main headNav flex-c-between">
                <ul class="nav flex-c-around">
                    <li><a href="./index.html" class="activeNav">首页</a></li>
                    <li><a>海外直购</a></li>
                    <li><a>考拉自有品牌</a></li>
                    <li><a>品质奶粉</a></li>
                    <li><a>人气面膜</a></li>
                    <li><a>充值</a></li>
                </ul>
                <div class="seconAndMenu">
                    <div class="headMenu">
                        <div class="category"><i>1</i>所有分类</div>
                        <ul class="categoryList">
                            <li><a href="#"><i>1</i>美容彩妆</a></li>
                            <li><a href="#"><i>1</i>母婴儿童</a></li>
                            <li><a href="#"><i>1</i>营养保健</a></li>
                            <li><a href="#"><i>1</i>数码家电</a></li>
                            <li><a href="#"><i>1</i>个护家清</a></li>
                            <li><a href="#"><i>1</i>服饰鞋靴</a></li>
                            <li><a href="#"><i>1</i>户外运动</a></li>
                            <li><a href="#"><i>1</i>手表配饰</a></li>
                            <li><a href="#"><i>1</i>轻奢</a></li>
                            <li><a href="#"><i>1</i>家居生活</a></li>
                            <li><a href="#"><i>1</i>环球美食</a></li>
                            <li><a href="#"><i>1</i>宠物生活</a></li>
                        </ul>
                    </div>
                    <div class="secondMenuBox">
                        <div class="secondMenuLeft">
                            <ul class="secondMenu">
                                <li>
                                    <div class="secondMenuItemBox">
                                        <h4>宠物主粮</h4>
                                        <div class="secondItemAs">
                                            <a href="#">湿粮罐头</a>
                                            <a href="#">狗粮</a>
                                            <a href="#">猫粮</a>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="secondMenuItemBox">
                                        <h4>零食罐头</h4>
                                        <div class="secondItemAs">
                                            <a href="#">狗零食</a>
                                            <a href="#">猫零食</a>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="secondMenuItemBox">
                                        <h4>宠物医疗保健</h4>
                                        <div class="secondItemAs">
                                            <a href="#">猫/狗药品</a>
                                            <a href="#">猫/狗保健品</a>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="secondMenuItemBox">
                                        <h4>猫砂类产品</h4>
                                        <div class="secondItemAs">
                                            <a href="#">其他猫砂类产品</a>
                                            <a href="#">猫砂</a>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="secondMenuItemBox">
                                        <h4>宠物洗护美容</h4>
                                        <div class="secondItemAs">
                                            <a href="#">口腔清洁</a>
                                            <a href="#">浴液</a>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="secondMenuItemBox">
                                        <h4>宠物玩具</h4>
                                        <div class="secondItemAs">
                                            <a href="#">宠物玩具</a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <ul class="secondMenu">
                                <li>
                                    <div class="secondMenuItemBox">
                                        <h4>护肤</h4>
                                        <div class="secondItemAs">
                                            <a href="#">洁面</a>
                                            <a href="#">卸妆</a>
                                            <a href="#">爽肤水</a>
                                            <a href="#">面霜</a>
                                            <a href="#">眼部护理</a>
                                            <a href="#">精华</a>
                                            <a href="#">乳液/凝胶</a>
                                            <a href="#">唇部护理</a>
                                            <a href="#">护肤套装</a>
                                            <a href="#">精油芳疗</a>
                                            <a href="#">面部护肤</a>
                                            <a href="#">防晒修复</a>
                                            <a href="#">男士护肤</a>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="secondMenuItemBox">
                                        <h4>面膜</h4>
                                        <div class="secondItemAs">
                                            <a href="#">美迪惠尔</a>
                                            <a href="#">JMsolution</a>
                                            <a href="#">RAY</a>
                                            <a href="#">Dr.Jart+ </a>
                                            <a href="#">JAYJUN</a>
                                            <a href="#">春雨</a>
                                            <a href="#">香蒲丽</a>
                                            <a href="#">森田药妆</a>
                                            <a href="#">肌美精</a>
                                            <a href="#">丽得姿</a>
                                            <a href="#">其他面膜</a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="secondMenuRight">
                            111
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- banner -->
        <div class="bannerBox">
            <div class="banner layui-carousel" id="test1">
                <div carousel-item>
                    <!-- <div>条目1</div>
                    <div>条目2</div>
                    <div>条目3</div>
                    <div>条目4</div>
                    <div>条目5</div> -->

                    <div><img src="./images/banner101.jpg" alt="" srcset=""></div>
                    <div><img src="./images/banner102.jpg" alt="" srcset=""></div>
                    <div><img src="./images/banner103.jpg" alt="" srcset=""></div>
                </div>
            </div>
            <!-- <div class="bannerCell">
                <div class="main flex-c-between">
                    <ul class="bannerLeft flex">
                        <li><i>1</i>考拉自营</li>
                        <li><i>1</i>全球直采</li>
                        <li><i>1</i>正品保障</li>
                        <li><i>1</i>售后无忧</li>
                    </ul>
                    <div class="down">
                        <i>1</i>新人下载APP，领10元满减红包
                    </div>
                </div>
            </div> -->
        </div>
        <!-- 商品 -->
        <div class="itemBox">
            <div class="main centerMain">
                <div class="item">
                    <div class="title outerTitle flex-c-between">
                        <div class="titleLeft outerTitleLeft">
                            <b>运动户外</b>
                            <span>热搜词：</span>
                            <a href="#">阿迪达斯</a>
                            <a href="#">耐克</a>
                            <a href="#">斯凯奇</a>
                            <a href="#">安德玛</a>
                        </div>
                        <a href="#" class="outerTitleRight">更多好货 <i>1</i></a>
                    </div>
                    <div class="content flex">
                        <div class="categoryLabelBox">
                            <ul class="categoryLabel">
                                <li>
                                    <a href="#">运动潮鞋</a>
                                </li>
                                <li>
                                    <a href="#">防晒</a>
                                </li>
                                <li>
                                    <a href="#">运动服饰</a></li>
                                <li>
                                    <a href="#">瑜伽游泳</a>
                                </li>
                                <li>
                                    <a href="#">运动鞋</a>
                                </li>
                                <li>
                                    <a href="#">户外鞋靴</a>
                                </li>
                            </ul>
                        </div>
                        <div class="categoryListBox">
                            <ul>
                                <li>
                                    <a href="#">
                                        <h3>斯凯奇新品_上市</h3>
                                        <p>热门]鞋款低至5.7折</p>
                                        <img src="./images/indexOuterSport01.jpg" alt=""></a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>自营折扣精选</h3>
                                        <p>阿迪耐克热卖
                                        </p>
                                        <img src="./images/indexOuterSport02.jpg" alt=""></a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>活力出游季</h3>
                                        <p>北面冲锋衣低至4折</p>
                                        <img src="./images/indexOuterSport03.jpg" alt=""></a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>安德玛健身特惠</h3>
                                        <p>超值好物</p>
                                        <img src="./images/indexOuterSport04.jpg" alt=""></a>
                                </li>
                            </ul>
                        </div>
                        <div class="categorySwift">
                            <h3 class="flex-c-between">
                                <span>最新热卖</span>
                                <div class="page">
                                    <span class="activeSpan"></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </h3>
                            <ul>
                                <li>
                                    <a href="#" class="pic">
                                        <img src="./images/indexOuterSportHot101.jpg" alt="">
                                    </a>
                                    <div class="categoryInfo">
                                        <a href="#">NIKE耐克梭织裤子男2020新款收口运动裤休闲长裤工装裤CU4326-010</a>
                                        <p>
                                            <span>
                                            ¥<b></b>528</span>¥599
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <a href="#" class="pic">
                                        <img src="./images/indexOuterSportHot102.jpg" alt="">
                                    </a>
                                    <div class="categoryInfo">
                                        <a href="#">NIKE耐克梭织裤子男2020新款收口运动裤休闲长裤工装裤CU4326-010</a>
                                        <p>
                                            <span>
                                            ¥<b></b>528</span>¥599
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <a href="#" class="pic">
                                        <img src="./images/indexOuterSportHot103.jpg" alt="">
                                    </a>
                                    <div class="categoryInfo">
                                        <a href="#">NIKE耐克梭织裤子男2020新款收口运动裤休闲长裤工装裤CU4326-010</a>
                                        <p>
                                            <span>
                                            ¥<b></b>528</span>¥599
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <a href="#" class="pic">
                                        <img src="./images/indexOuterSportHot104.jpg" alt="">
                                    </a>
                                    <div class="categoryInfo">
                                        <a href="#">NIKE耐克梭织裤子男2020新款收口运动裤休闲长裤工装裤CU4326-010</a>
                                        <p>
                                            <span>
                                            ¥<b></b>528</span>¥599
                                        </p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="hotLogo">
                        <h3>热卖品牌</h3>
                        <ul class="logoList">
                            <li>
                                <a href="#"><img src="./images/indexOuterSportLogo01.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/indexOuterSportLogo02.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/indexOuterSportLogo03.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/indexOuterSportLogo04.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/indexOuterSportLogo05.jpg" alt=""></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="item">
                    <div class="title flex-c-between">
                        <div class="titleLeft">
                            <b>热门品牌</b>
                            <span>热门品牌全球精选，一网打尽</span>
                        </div>
                        <a href="#" class="outerTitleRight">换一批 <i>1</i></a>
                    </div>
                    <div class="content2 flex">
                        <div class="categorySwiftBox">
                            <div class="categorySwift2">
                                <div class="imgList layui-carousel" lay-filter="test2" id="test2">

                                    <div carousel-item>
                                        <div> <img src="./images/indexHotSwift01.jpg" alt=""> </div>
                                        <div><img src="./images/indexHotSwift02.jpg" alt=""></div>
                                        <div><img src="./images/indexHotSwift03.jpg" alt=""></div>
                                    </div>
                                </div>
                                <b class="leftBtn">&lt;</b>
                                <b class="rightBtn">&gt;</b>
                                <div class="progress" id="progress"></div>
                            </div>
                            <div class="imgText">
                                <b>Kao 花王</b>
                                <p>日本高人气日化品牌</p>
                            </div>
                        </div>
                        <ul class="items hotLogoItem flex-c-between">
                            <li>
                                <div class="logoImgBox">
                                    <img src="./images/indexHot01.jpg" alt=""></a>
                                </div>
                                <div class="logoBoxCon">
                                    <p class="logoInfo">
                                        <span class="logoFocusCount">123456</span> 人关注了本品牌
                                    </p>
                                    <a href="#">进入品牌</a>
                                </div>
                                <h4 class="specialInfo">科学配方 优质原材料</h4>
                            </li>
                            <li>
                                <div class="logoImgBox">
                                    <img src="./images/indexHot02.jpg" alt=""></a>
                                </div>
                                <div class="logoBoxCon">
                                    <p class="logoInfo">
                                        <span class="logoFocusCount">123456</span> 人关注了本品牌
                                    </p>
                                    <a href="#">进入品牌</a>
                                </div>
                                <h4 class="specialInfo">科学配方 优质原材料</h4>
                            </li>
                            <li>
                                <div class="logoImgBox">
                                    <img src="./images/indexHot03.jpg" alt=""></a>
                                </div>
                                <div class="logoBoxCon">
                                    <p class="logoInfo">
                                        <span class="logoFocusCount">123456</span> 人关注了本品牌
                                    </p>
                                    <a href="#">进入品牌</a>
                                </div>
                                <h4 class="specialInfo">科学配方 优质原材料</h4>
                            </li>
                            <li>
                                <div class="logoImgBox">
                                    <img src="./images/indexHot04.jpg" alt=""></a>
                                </div>
                                <div class="logoBoxCon">
                                    <p class="logoInfo">
                                        <span class="logoFocusCount">123456</span> 人关注了本品牌
                                    </p>
                                    <a href="#">进入品牌</a>
                                </div>
                                <h4 class="specialInfo">科学配方 优质原材料</h4>
                            </li>
                            <li>
                                <div class="logoImgBox">
                                    <img src="./images/indexHot05.jpg" alt=""></a>
                                </div>
                                <div class="logoBoxCon">
                                    <p class="logoInfo">
                                        <span class="logoFocusCount">123456</span> 人关注了本品牌
                                    </p>
                                    <a href="#">进入品牌</a>
                                </div>
                                <h4 class="specialInfo">科学配方 优质原材料</h4>
                            </li>
                            <li>
                                <div class="logoImgBox">
                                    <img src="./images/indexHot06.jpg" alt=""></a>
                                </div>
                                <div class="logoBoxCon">
                                    <p class="logoInfo">
                                        <span class="logoFocusCount">123456</span> 人关注了本品牌
                                    </p>
                                    <a href="#">进入品牌</a>
                                </div>
                                <h4 class="specialInfo">科学配方 优质原材料</h4>
                            </li>
                            <li>
                                <div class="logoImgBox">
                                    <img src="./images/indexHot07.jpg" alt=""></a>
                                </div>
                                <div class="logoBoxCon">
                                    <p class="logoInfo">
                                        <span class="logoFocusCount">123456</span> 人关注了本品牌
                                    </p>
                                    <a href="#">进入品牌</a>
                                </div>
                                <h4 class="specialInfo">科学配方 优质原材料</h4>
                            </li>
                            <li>
                                <div class="logoImgBox">
                                    <img src="./images/indexHot08.jpg" alt=""></a>
                                </div>
                                <div class="logoBoxCon">
                                    <p class="logoInfo">
                                        <span class="logoFocusCount">123456</span> 人关注了本品牌
                                    </p>
                                    <a href="#">进入品牌</a>
                                </div>
                                <h4 class="specialInfo">科学配方 优质原材料</h4>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="item">
                    <div class="title flex-c-between">
                        <div class="titleLeft">
                            <b>美妆专区</b>
                            <span>热搜词：</span>
                            <a href="#">面膜</a>
                            <a href="#">口红</a>
                            <a href="#">眼霜</a>
                            <a href="#">精华</a>
                            <a href="#">卸妆</a>
                        </div>
                        <a href="#" class="outerTitleRight">更多好货 <i>1</i></a>
                    </div>
                    <div class="content flex">
                        <div class="categoryLabelBox">
                            <ul class="categoryLabel">
                                <li>
                                    <a href="#">运动潮鞋</a>
                                </li>
                                <li>
                                    <a href="#">防晒</a>
                                </li>
                                <li>
                                    <a href="#">运动服饰</a></li>
                                <li>
                                    <a href="#">瑜伽游泳</a>
                                </li>
                                <li>
                                    <a href="#">运动鞋</a>
                                </li>
                                <li>
                                    <a href="#">户外鞋靴</a>
                                </li>
                            </ul>
                        </div>
                        <div class="categoryListBox">
                            <ul>
                                <li>
                                    <a href="#">
                                        <h3>斯凯奇新品_上市</h3>
                                        <p>热门]鞋款低至5.7折</p>
                                        <img src="./images/indexOuterSport01.jpg" alt=""></a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>自营折扣精选</h3>
                                        <p>阿迪耐克热卖
                                        </p>
                                        <img src="./images/indexOuterSport02.jpg" alt=""></a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>活力出游季</h3>
                                        <p>北面冲锋衣低至4折</p>
                                        <img src="./images/indexOuterSport03.jpg" alt=""></a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>安德玛健身特惠</h3>
                                        <p>超值好物</p>
                                        <img src="./images/indexOuterSport04.jpg" alt=""></a>
                                </li>
                            </ul>
                        </div>
                        <div class="categorySwift">
                            <h3 class="flex-c-between">
                                <span>最新热卖</span>
                                <div class="page">
                                    <span class="activeSpan"></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </h3>
                            <ul>
                                <li>
                                    <a href="#" class="pic">
                                        <img src="./images/indexOuterSportHot101.jpg" alt="">
                                    </a>
                                    <div class="categoryInfo">
                                        <a href="#">NIKE耐克梭织裤子男2020新款收口运动裤休闲长裤工装裤CU4326-010</a>
                                        <p>
                                            <span>
                                            ¥<b></b>528</span>¥599
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <a href="#" class="pic">
                                        <img src="./images/indexOuterSportHot102.jpg" alt="">
                                    </a>
                                    <div class="categoryInfo">
                                        <a href="#">NIKE耐克梭织裤子男2020新款收口运动裤休闲长裤工装裤CU4326-010</a>
                                        <p>
                                            <span>
                                            ¥<b></b>528</span>¥599
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <a href="#" class="pic">
                                        <img src="./images/indexOuterSportHot103.jpg" alt="">
                                    </a>
                                    <div class="categoryInfo">
                                        <a href="#">NIKE耐克梭织裤子男2020新款收口运动裤休闲长裤工装裤CU4326-010</a>
                                        <p>
                                            <span>
                                            ¥<b></b>528</span>¥599
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <a href="#" class="pic">
                                        <img src="./images/indexOuterSportHot104.jpg" alt="">
                                    </a>
                                    <div class="categoryInfo">
                                        <a href="#">NIKE耐克梭织裤子男2020新款收口运动裤休闲长裤工装裤CU4326-010</a>
                                        <p>
                                            <span>
                                            ¥<b></b>528</span>¥599
                                        </p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="hotLogo">
                        <h3>热卖品牌</h3>
                        <ul class="logoList">
                            <li>
                                <a href="#"><img src="./images/indexOuterSportLogo01.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/indexOuterSportLogo02.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/indexOuterSportLogo03.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/indexOuterSportLogo04.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/indexOuterSportLogo05.jpg" alt=""></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="item hot">
                    <div class="title flex-c-between">
                        <div class="titleLeft">
                            <b>奢品馆</b>
                            <span>热搜词：</span>
                            <a href="#">GUCCI</a>
                            <a href="#">COACH</a>
                            <a href="#">MK</a>
                            <a href="#">Burberry</a>
                            <a href="#">PRADA</a>
                            <a href="#">FENDI</a>
                            <a href="#">LV</a>
                            <a href="#">DIOR</a>
                        </div>
                        <a href="#" class="outerTitleRight">更多好货 <i>1</i></a>
                    </div>
                </div>
                <div class="item hot">
                    <div class="title flex-c-between">
                        <div class="titleLeft">
                            <b>手表配饰</b>
                            <span>热搜词：</span>
                            <a href="#">DW</a>
                            <a href="#">施华洛世奇</a>
                            <a href="#">天梭</a>
                            <a href="#">浪琴</a>
                            <a href="#">潘多拉</a>
                            <a href="#">周大福</a>
                            <a href="#">雷朋</a>
                            <a href="#">APM</a>
                        </div>
                        <a href="#" class="outerTitleRight">更多好物 <i>1</i></a>
                    </div>
                </div>
                <div class="item hot">
                    <div class="title flex-c-between">
                        <div class="titleLeft">
                            <b>美食生鲜</b>
                            <span>热搜词：</span>
                            <a href="#">巧克力</a>
                            <a href="#">奶粉 成人</a>
                            <a href="#">麦片</a>
                            <a href="#">零食</a>
                            <a href="#">红酒</a>

                        </div>
                        <a href="#" class="outerTitleRight">更多好货 <i>1</i></a>
                    </div>
                </div>
                <div class="item hot">
                    <div class="title flex-c-between">
                        <div class="titleLeft">
                            <b>服饰鞋靴</b>
                            <span>热搜词：</span>
                            <a href="#">CK</a>
                            <a href="#">TOMMY</a>
                            <a href="#">阿玛尼</a>
                            <a href="#">Champion</a>
                            <a href="#">MO&Co.</a>
                        </div>
                        <a href="#" class="outerTitleRight">更多好货 <i>1</i></a>
                    </div>
                </div>
                <div class="item hot">
                    <div class="title flex-c-between">
                        <div class="titleLeft">
                            <b>家居生活</b>
                            <span>热搜词：</span>
                            <a href="#">碧然德</a>
                            <a href="#">FUMAKILLA</a>
                            <a href="#">蕉下</a>
                        </div>
                        <a href="#" class="outerTitleRight">更多好货 <i>1</i></a>
                    </div>
                </div>
                <div class="item hot">
                    <div class="title flex-c-between">
                        <div class="titleLeft">
                            <b>数码家电</b>
                            <span>热搜词：</span>
                            <a href="#">电动牙刷</a>
                            <a href="#">耳机</a>
                            <a href="#">钢笔</a>
                            <a href="#">手机</a>
                            <a href="#">吹风机</a>
                            <a href="#">剃须刀</a>
                            <a href="#">电脑</a>
                            <a href="#">任天堂</a>
                        </div>
                        <a href="#" class="outerTitleRight">更多好货 <i>1</i></a>
                    </div>
                </div>
                <div class="item">
                    <div class="title flex-c-between">
                        <div class="titleLeft">
                            <b>猜你喜欢</b>
                            <span>根据你的浏览记录推荐的商品</span>
                        </div>
                        <a href="#" class="outerTitleRight">换一批 <i>1</i></a>
                    </div>
                    <div class="likeCon flex-between">
                        <div class="likeItem">
                            <a href="#"><img src="./images/indexLike01.jpg" alt=""></a>
                            <p><a href="#">【3件装 6种可选】Ryo 吕 红吕/棕吕/绿吕洗发水组合/洗护组合 400ml/瓶</a></p>
                            <div class="info flex-c-between">
                                <p class="price">
                                    <span>¥<b>85</b></span>¥207
                                </p>
                                <a href="#" class="comment">
                                    <span>63765</span> 人已评价
                                </a>
                            </div>
                        </div>
                        <div class="likeItem">
                            <a href="#"><img src="./images/indexLike01.jpg" alt=""></a>
                            <p><a href="#">【3件装 6种可选】Ryo 吕 红吕/棕吕/绿吕洗发水组合/洗护组合 400ml/瓶</a></p>
                            <div class="info flex-c-between">
                                <p class="price">
                                    <span>¥<b>85</b></span>¥207
                                </p>
                                <a href="#" class="comment">
                                    <span>63765</span> 人已评价
                                </a>
                            </div>
                        </div>
                        <div class="likeItem">
                            <a href="#"><img src="./images/indexLike01.jpg" alt=""></a>
                            <p><a href="#">【3件装 6种可选】Ryo 吕 红吕/棕吕/绿吕洗发水组合/洗护组合 400ml/瓶</a></p>
                            <div class="info flex-c-between">
                                <p class="price">
                                    <span>¥<b>85</b></span>¥207
                                </p>
                                <a href="#" class="comment">
                                    <span>63765</span> 人已评价
                                </a>
                            </div>
                        </div>
                        <div class="likeItem">
                            <a href="#"><img src="./images/indexLike01.jpg" alt=""></a>
                            <p><a href="#">【3件装 6种可选】Ryo 吕 红吕/棕吕/绿吕洗发水组合/洗护组合 400ml/瓶</a></p>
                            <div class="info flex-c-between">
                                <p class="price">
                                    <span>¥<b>85</b></span>¥207
                                </p>
                                <a href="#" class="comment">
                                    <span>63765</span> 人已评价
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 左侧导航 -->
                <div class="indexLeft">
                    <a href="#">
                        <img src="./images/indexLeft01.jpg" alt="">
                    </a>
                    <ul class="indexLeftHot">
                        <li><a href="#">热门品牌</a></li>
                    </ul>
                    <ul class="indexLeftCategory">
                        <li><a href="#">户外运动</a></li>
                        <li><a href="#">美妆专区</a></li>
                        <li><a href="#">奢品馆</a></li>
                        <li><a href="#">手表配饰</a></li>
                        <li><a href="#">美食生鲜</a></li>
                        <li><a href="#">服饰鞋靴</a></li>
                        <li><a href="#">家居生活</a></li>
                        <li><a href="#">数码家电</a></li>
                    </ul>
                    <a href="#">
                        <img src="./images/indexLeft02.png" alt="">
                    </a>
                </div>
                <!-- 右侧导航 -->
                <div class="indexRight">
                    <ul>
                        <li>
                            <a href="#">
                                <i>1</i>
                                <span>签到</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i>1</i>
                                <span>购物车</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i>1</i>
                                <span>APP</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i>^</i>
                                <span>Top</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="bottomBox"></div>
        <div class="footer"></div>
    </div>
</body>
<script src="./libs/jquery.js"></script>
<script src="./js/index.js"></script>
<script>
    layui.use('carousel', function() {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1',
            width: '100%' //设置容器宽度
                ,
            arrow: 'always', //始终显示箭头
            height: '505px'
                //,anim: 'updown' //切换动画方式
        });
    });


    layui.use('carousel', function() {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test2',
            width: '100%', //设置容器宽度
            height: '220px',
            arrow: 'hover' //始终显示箭头
                ,
            anim: 'fade' //切换动画方式
        });

        carousel.on('change(test2)', function(obj) { //test1来源于对应HTML容器的 lay-filter="test1" 属性值
            //   console.log(obj.index); //当前条目的索引
            //   console.log(obj.prevIndex); //上一个条目的索引
            var value = obj.index * 33 + 33
            $('#progress').width(value + '%')
                //   console.log(obj.item); //当前条目的元素对象
        });


    });
</script>

</html>

</html>